Accidental Dismissal of Overlays: A Common Mobile Usability Problem意外關閉覆蓋層

覆蓋層在移動裝置中越來越常見，但關閉它們的方法通常不符合使用者預期，容易導致誤關閉。

梅西百貨的應用程式（左）使用部分覆蓋來顯示購物車，而 Nordstrom.com（右）使用全覆蓋來展示產品影象.（注：“Nordstrom.com”為品牌名稱，保留原文）
HM.com 使用了一個部分覆蓋來實現用於主導航的順序選單。.
Facebook for iOS：在新聞推送（左側）中點選一篇文章，會以整頁覆蓋的形式（右側）顯示出來。
谷歌地圖移動應用使用模態覆蓋層來顯示排序選項（左），並使用非模態覆蓋層來顯示特定位置的資訊（在此例中為尼爾森·諾曼集團——右）。這兩種覆蓋層都是底部工作表的示例——特定於應用程式的覆蓋層，出現在螢幕底部。
沃爾瑪移動應用程式：當我們的研究參與者從產品列表（左上角）中選擇一個產品時，它會在一個覆蓋層（右上角）中顯示。該產品的客戶評價會在另一個覆蓋層（左下角）中顯示，位於前一個覆蓋層之上。當使用者點選x圖示以返回產品頁面時，他卻被帶到產品列表頁面（左上角）。關閉客戶評價覆蓋層的“正確”、經設計師認可的方法是螢幕上的後退箭頭（以黃色突出顯示）或水平滑動手勢。

覆蓋層關閉問題 (Overlay-Dismissal Problems)

覆蓋層在移動端UI中無處不在，從導航選單、底部彈窗到產品詳情頁等。在覆蓋層的關閉方法上，不同設計選擇會導致使用者錯誤操作，引發以下問題：

1. 使用者選擇了錯誤的關閉方法 (Users Pick the Wrong Overlay-Dismissal Method)

不同應用的覆蓋層關閉方法不一，如：點選關閉按鈕、點選覆蓋層外部、向下滑動等。使用者無法預測哪種方法能帶來理想結果。

領英（LinkedIn）安卓應用：使用者瀏覽GSK頁面時，開啟職業選單並選擇"經驗豐富的專業人士"。嘗試使用手機"返回"按鈕返回上級選單，卻意外回到GSK主頁。正確操作應使用螢幕上的"<職業（Careers）"按鈕。代替。
一位使用者在勞氏（Lowes）的Instagram商店頁面上瀏覽產品。他點選檢視詳情，開啟了應用內瀏覽器。在產品頁面上，他又點選了燈的數量，開啟了另一個覆蓋層。想要關閉時，他誤點了左上角的大X而非右側的小x，結果關閉了整個瀏覽器視窗，回到了Instagram商店。

2. 使用者的操作丟失 (Users’ Work Is Lost)

錯誤關閉方法會導致使用者的工作丟失，迫使其重新操作。例如，在LinkedIn應用中，使用者誤用手機的“返回”按鈕關閉了頁面，丟失了導航記錄。類似情況在Instagram的內嵌瀏覽器中也容易發生。

Overstock.com為該網站的主要導航使用了一個順序選單：使用者必須先選擇一個主要類別，如裝飾（左側），然後選擇一個二級子類別，如牆飾（Wall Decor）（右側），以此類推。在選單外意外點選會關閉選單並丟失當前所選子類別的檢視。

3. 疊加的覆蓋層加劇混亂 (Stacked Overlays Amplify Confusion)

多個覆蓋層疊加時更易導致誤關閉。例如，在Google Maps應用中，使用者檢視餐館詳情時向下滑動以返回餐館列表，卻意外關閉了所有疊加層，回到了最初的地圖檢視。

谷歌地圖iPhone應用：搜餐廳時顯示地圖和底部餐廳列表。向下滾動擴充套件列表。點選餐廳顯示詳情頁。向下滑動關閉詳情頁時，意外返回地圖而非列表。使用者困惑，重新搜尋。

如何避免覆蓋層關閉問題 (How to Prevent Overlay-Dismissal Problems)

1. 使用替代設計 (Use an Alternative Pattern)

避免使用覆蓋層。在必要情況下，覆蓋層適合展示需即時上下文的資訊，例如Google Maps的餐館列表。但在其他場景，如產品詳情頁面，內容可以透過單獨頁面或可展開的手風琴元件來呈現，減少誤操作的可能。

Revolve 移動應用程式使用單獨的頁面來顯示產品詳細資訊（左）和評論（右）。
諾德斯特龍（Nordstrom）應用程式使用手風琴式的介面來展示評論和其他與商品相關的資訊，

2. 使用部分覆蓋層而非全屏覆蓋層 (Prefer Partial to Full-Page Overlays)

內容較少時可使用部分覆蓋層，使使用者能識別該UI元素為覆蓋層，而非普通頁面，避免使用者誤用瀏覽器或手機的“返回”按鈕。若內容較多需滾動，考慮使用全屏覆蓋層以避免使用者誤關閉。

像 Gmail（左）和NeimanMarcus.com（右）所使用的部分覆蓋層很容易識別，並且不太可能誘使使用者使用瀏覽器或手機的“後退”按鈕將其關閉。

3. 避免多重覆蓋層疊加 (Do Not Use Stacks of Overlays)

重疊的覆蓋層易引發誤操作，因此儘量避免使用多個覆蓋層。

4. 包含顯著的關閉按鈕 (Include a Close Button for Dismissing the Overlay)

覆蓋層應包含清晰的“X”關閉按鈕，特別是底部彈窗。雖然可以支援向下滑動手勢關閉，但顯著的關閉按鈕可有效避免誤操作。

百思買應用程式在左上角使用了一個清晰的 X 按鈕，用於在全屏覆蓋層中預覽產品影象（左）或將商品新增到購物車（右）。
迪拉德官網支援使用瀏覽器的“後退”按鈕來關閉全屏覆蓋（右側）並返回到產品詳情頁面（左側）。

5. 讓內建的返回按鈕關閉覆蓋層 (The Built-In Back Button Should Close the Overlay)

支援使用者透過瀏覽器或手機的“返回”按鈕關閉覆蓋層。這樣即使使用者誤用“返回”按鈕，仍能按預期返回上一個檢視，而不會關閉整個頁面或瀏覽器。

覆蓋層是移動端常見的設計元素，但容易導致意外關閉和工作丟失，尤其在多個疊加層的情況下。建議設計者儘量避免使用覆蓋層，採用手風琴或獨立頁面等替代元件。如果必須使用覆蓋層，應確保其易於識別，且內容簡單明確。同時，所有覆蓋層（包括底部彈窗）都應支援以下關閉方式：一個清晰的關閉按鈕和內建的返回按鈕或手勢。